<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link type="text/css" href="common/common.css" rel="stylesheet">
<body>
<div id="leftlayout">利用div布局可以利用div 的float:left属性，实现一行布满以后自动换下一行，汉字的空格字符为&#12288; 如要对齐三个汉字与四个汉字，可以在三个汉字后加一个汉字空格
<p>利用div布局的优点是可以“构造”任意大小的“单元”供不同大小的控件使用，而table则在这一点方面比较麻烦，并且容易出错
<div class="bar" style="text-align:left;height:80px;">
<div style="width:20%;float:left">功能名称<input type="text" name="quseName" size="10" value="" class="textbox"></div>

<div style="width:20%;float:left">设计人&#12288;<select name="qdesigner">
	<option value="" selected="selected"></option>
	<option value="管理员">管理员</option>
	<option value="用户">用户</option>
</select></div>

<div style="width:20%;float:left">开发者&#12288;<select name="qdeveloper">
	<option value="" selected="selected"></option>
	<option value="管理员">管理员</option>
	<option value="用户">用户</option>
</select></div>

<div style="width:20%;float:left">测试人&#12288;<select name="qtester">
	<option value="" selected="selected"></option>
	<option value="管理员">管理员</option>
	<option value="用户">用户</option>
</select></div>
<div style="width:18%;float:left">类型&#12288;&#12288; <select name="qtype">
	<option value="" selected="selected"></option>
	<option value="功能增强型">功能增强型</option>
	<option value="核心业务型">核心业务型</option>
</select></div>

<div style="width:20%;float:left">状态&#12288;&#12288;<select name="qstate">
	<option value="" selected="selected"></option>
	<option value="待测试">待测试</option>
	<option value="待开发">待开发</option>
	<option value="有缺陷">有缺陷</option>
	<option value="已完成">已完成</option>
</select></div>
<div style="width:20%;float:left">初始版本<input type="text" name="qinitVersion" size="10" value="" class="textbox"></div>

<div style="width:20%;float:left">迭代周期<select name="qwithinCycle">
	<option value="" selected="selected"></option>
	<option value="true">true</option>
	<option value="false">false</option>
</select></div>
<div style="width:20%;float:left">优先级&#12288;<select name="qpriority">
	<option value="" selected="selected"></option>
	<option value="高">高</option>
	<option value="中">中</option>
	<option value="低">低</option>
</select></div>
<div style="width:40%;float:left">录入时间<input type="text" name="qstartTime" size="10" value="" class="textbox"> 截止到<input type="text"
	name="qendTime" size="10" value="" class="textbox"></div>
<div style="width:40%;float:left;">排序&#12288;&#12288;<select name="requirementSort">
	<option value="" selected="selected"></option>
	<option value="useName">功能名称</option>
	<option value="suggester">提议人</option>
	<option value="type">类型</option>
	<option value="needID">需求ID</option>
	<option value="withinCycle">迭代周期内</option>
	<option value="withinContract">合同内</option>
	<option value="content">需求内容</option>
	<option value="state">状态</option>
	<option value="initVersion">初始版本</option>
	<option value="date">提出时间</option>
</select>升<input type="radio" name="updn" value="up">降<input type="radio" name="updn" value="dn">
<button class="button" style="height:20px" type="submit" name="confirm">提 交</button>
</div>
</div>
用无边框的Table来实现上述等价的布局
<div class="bar" style="text-align:left;height:70px;">
<table style="border-collapse:collapse;width:100%">
	<tr>
		<td>功能名称</td>
		<td><input type="text" name="quseName" size="10" value="" class="textbox"></td>
		<td>设计人</td>
		<td><select name="qdesigner">
			<option value="" selected="selected"></option>
			<option value="管理员">管理员</option>
			<option value="用户">用户</option>
		</select></td>
		<td>开发者</td>
		<td><select name="qdeveloper">
			<option value="" selected="selected"></option>
			<option value="管理员">管理员</option>
			<option value="用户">用户</option>
		</select></td>
		<td>测试人</td>
		<td><select name="qtester">
			<option value="" selected="selected"></option>
			<option value="管理员">管理员</option>
			<option value="用户">用户</option>
		</select></td>
		<td>类型</td>
		<td><select name="qtype">
			<option value="" selected="selected"></option>
			<option value="功能增强型">功能增强型</option>
			<option value="核心业务型">核心业务型</option>
		</select></td>
	</tr>
	<tr>
		<td>状态</td>
		<td><select name="qstate">
			<option value="" selected="selected"></option>
			<option value="待测试">待测试</option>
			<option value="待开发">待开发</option>
			<option value="有缺陷">有缺陷</option>
			<option value="已完成">已完成</option>
		</select></td>
		<td>初始版本</td>
		<td><input type="text" name="qinitVersion" size="10" value="" class="textbox"></td>
		<td>迭代周期</td>
		<td><select name="qwithinCycle">
			<option value="" selected="selected"></option>
			<option value="true">true</option>
			<option value="false">false</option>
		</select></td>
		<td>优先级</td>
		<td><select name="qpriority">
			<option value="" selected="selected"></option>
			<option value="高">高</option>
			<option value="中">中</option>
			<option value="低">低</option>
		</select></td>
	</tr>
</table>
</div>
<font style="color:blue">float属性的使用demo，并排三个Table的演示</font>
<table width="300px" border="1" style="float:left">
	<tr>
		<td>asdfsdfsa</td>
	</tr>
	<tr>
		<td>asdfsdfsa</td>
	</tr>
</table>
<table width="300px" border="1" style="float:left">
	<tr>
		<td>asdfsdfsa</td>
	</tr>
	<tr>
		<td>asdfsdfsa</td>
	</tr>
</table>
<table width="300px" border="1">
	<tr>
		<td>asdfsdfsa</td>
	</tr>
	<tr>
		<td>asdfsdfsa</td>
	</tr>
</table>
<font style="color:blue">div的相对及绝对布局方式，父DIV的position:relative；子DIV采用position:absolute，同时通过left，top，bottom，right等css属性来达到布局（左、右、上、下）的效果</font><br>
<div style="border:1px solid;background-color:#ffeedd;width:500px;height:500px;position:relative">
<div style="border:1px solid;background-color:#ffffdd;width:200px;height:200px;position:relative;left:0px;top:0px">left:0px;top:0px
的div(左上角相对定位)</div>
<div style="border:1px solid;background-color:#ddeedd;width:200px;height:200px;position:absolute;right:20px;top:0px">right:20px;top:0px的div(右上角相对定位)
<table style="width:50px;height:50px;border:1px solid #ffedde">
	<tr>
		<td>dfsdfd</td>
	</tr>
	<tr>
		<td>dfsdfd</td>
	</tr>
</table>
</div>
<div style="border:1px solid;background-color:#cceeff;width:100px;height:100px;position:absolute;left:0px;bottom:0px">left:0px;bottom:0px的div(左下角相对定位)</div>
<div style="border:1px solid;background-color:#aaddee;width:100px;height:100px;position:absolute;right:0px;bottom:0px">right:0px;bottom:0px的div(右下角相对定位)</div>
<div style="border:1px solid;background-color:#eefedd;width:500px;height:100px;position:absolute;left:0px;top:250px">left:0px;top:250px的div</div>
<input type="button" value="确定" style="position:absolute;left:220px;bottom:0px" /></div>
</div>
</body>
</html>
